<!-- 蓝色登录页面2 -->
<template>
  <view style="height:100vh;background: #fff;">
    <view class="img-a">
      <view class="t-b">
        您好，
        <br/>
        欢迎注册使用！
      </view>
    </view>
    <view class="login-view" style="">
      <view class="t-login">
        <form class="cl">
          <view class="t-a">
            <text class="txt">用户名</text>
            <input v-model="form.username" maxlength="11" placeholder="请输入您的用户名" type="text"/>
            <text v-if="usernameHint" class="hint">{{ usernameHint }}</text>
          </view>
          <view class="t-a">
            <text class="txt">手机号</text>
            <input v-model="form.telephone" maxlength="11" placeholder="请输入您的手机号" type="number"/>
          </view>
          <view class="t-a">
            <text class="txt">密码</text>
            <input v-model="form.password" cursor-spacing="80" maxlength="18" placeholder="请输入您的密码"
                   type="password"/>
          </view>
          <view class="t-a">
            <text class="txt">确认密码</text>
            <input v-model="passwordt" cursor-spacing="80" maxlength="18" placeholder="请再次输入您的密码"
                   type="password"/>
            <text v-if="passwordHint" class="hint">{{ passwordHint }}</text>
          </view>
          <view class="t-a">
            <text class="txt">邀请码</text>
            <input v-model="form.rCode" cursor-spacing="80" maxlength="6" placeholder="请输入邀请码" type="text"/>
          </view>
          <view class="reg" @tap="register">注 册</view>
        </form>
      </view>
    </view>
  </view>
  <view
      style="position:absolute;z-index: 100;top: 40%;left: 35%;"
  >
    <up-loading-icon :show="shows" size="28"
                     text="注册中"
                     textSize="28"></up-loading-icon>
  </view>
</template>
<script setup>
import {ref, watch} from 'vue';
import {registerAPI} from '../../api/register.js'
import {WeXinloginAPI} from "../../api/login";

const shows = ref(false);
const loadingText = ref('注册中...');
const passwordt = ref('');
const form = ref({
  telephone: '',
  password: '',
  username: '',
  rCode: '',
  id: '',
})
let usernameHint = '';
let passwordHint = '';
// 监听用户名输入
// 使用watch监听form.username的变化
watch(() => form.value.username, (newVal, oldVal) => {
  if (newVal.trim() === '') {
    // 如果用户名是空的（或只有空格），显示提示
    usernameHint = '请输入用户名';
  } else {
    // 如果用户名已输入，清空提示
    usernameHint = '';
  }
});
// 监听密码和确认密码的变化，检查是否一致
watch([() => form.value.password, () => passwordt.value], ([newPassword, newConfirmPassword], [oldPassword, oldConfirmPassword]) => {
  if (newPassword !== '' && newPassword !== newConfirmPassword) {
    passwordHint = '两次输入的密码不一致';
  } else {
    passwordHint = ''; // 如果没有错误，清空提示
  }
});
const role = () => {
  if (!form.value.username) {
    uni.showToast({title: '请输入您的手机号', icon: 'none'});
    return false;
  }
  if (!form.value.telephone) {
    uni.showToast({title: '请输入您的手机号', icon: 'none'});
    return false;
  }
  if (!/^[1][3,4,5,7,8,9][0-9]{9}$/.test(form.value.telephone)) {
    uni.showToast({title: '请输入正确手机号', icon: 'none'});
    return false;
  }
  if (!form.value.password) {
    uni.showToast({title: '请输入您的密码', icon: 'none'});
    return false;
  }
  if (!form.value.rCode) {
    uni.showToast({title: '请输入邀请码', icon: 'none'});
    return false;
  }
  return true;
}

const register = async () => {
  if (!role()) {
    // 如果role函数返回false，则不发送请求，直接返回
    return;
  }
  shows.value = true
  await wx.login({
    success(res) {
      console.log(res)
      if (res.errMsg === "login:ok") {
        const code = res.code;
        WeXinloginAPI(code)
            .then((result) => {
              // 当Promise被fulfilled时，这里的代码会执行
              // result就是Promise的结果值
              const res_id = result; // 或者你可以从result中提取你需要的部分，比如result.id
              console.log('res_id', res_id); // 这里会打印出实际的res_id值
              form.value.id = res_id.data
              if (res_id.code === 200) {
                registerAPI(form.value).then(user_res => {
                  if (user_res.code === 200) {
                    shows.value = false;
                    console.log(111)
                    // 跳转到其他页面，例如 'home'
                    uni.navigateBack({url: "/pages/login/login"})
                    uni.showToast({title: '注册成功', icon: 'none'});
                  } else {
                    // 隐藏加载提示
                    shows.value = false;
                    uni.showToast({title: user_res.msg, icon: 'none'});
                  }

                })
              }
            })
            .catch((error) => {
              // 当Promise被rejected时，这里的代码会执行
              // error就是Promise的错误值
              console.error('An error occurred:', error);
            });
      }
    },
    fail(res) {
      console.log(res)
    }
  });
}
const reg = () => {
  uni.showToast({title: '注册跳转', icon: 'none'});
}
const wxLogin = () => {
  uni.showToast({title: '微信登录', icon: 'none'});

}
const zfbLogin = () => {
  uni.showToast({title: '支付宝登录', icon: 'none'});
}
</script>
<style>
.txt {
  font-size: 32rpx;
  font-weight: bold;
  color: #333333;
}

.img-a {
  width: 100%;
  height: 450rpx;
  background-image: url(https://zhoukaiwen.com/img/loginImg/head.png);
  background-size: 100%;
}

.reg {
  font-size: 28rpx;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
  background: #f5f6fa;
  color: #000000;
  text-align: center;
  margin-top: 30rpx;
}

.login-view {
  width: 100%;
  position: relative;
  margin-top: -120rpx;
  background-color: #ffffff;
  border-radius: 8% 8% 0% 0;
}

.t-login {
  width: 600rpx;
  margin: 0 auto;
  font-size: 28rpx;
  padding-top: 80rpx;
}

.t-login button {
  font-size: 28rpx;
  background: #2796f2;
  color: #fff;
  height: 90rpx;
  line-height: 90rpx;
  border-radius: 50rpx;
  font-weight: bold;
}

.t-login input {
  height: 90rpx;
  line-height: 90rpx;
  margin-bottom: 50rpx;
  border-bottom: 1px solid #e9e9e9;
  font-size: 28rpx;
}

.t-login .t-a {
  position: relative;
}

.t-b {
  text-align: left;
  font-size: 42rpx;
  color: #ffffff;
  padding: 130rpx 0 0 70rpx;
  font-weight: bold;
  line-height: 70rpx;
}

.t-login .t-c {
  position: absolute;
  right: 22rpx;
  top: 22rpx;
  background: #5677fc;
  color: #fff;
  font-size: 24rpx;
  border-radius: 50rpx;
  height: 50rpx;
  line-height: 50rpx;
  padding: 0 25rpx;
}

.t-login .t-d {
  text-align: center;
  color: #999;
  margin: 80rpx 0;
}

.t-login .t-e {
  text-align: center;
  width: 250rpx;
  margin: 80rpx auto 0;
}

.t-login .t-g {
  float: left;
  width: 50%;
}

.t-login .t-e image {
  width: 50rpx;
  height: 50rpx;
}

.t-login .t-f {
  text-align: center;
  margin: 150rpx 0 0 0;
  color: #666;
}

.t-login .t-f text {
  margin-left: 20rpx;
  color: #aaaaaa;
  font-size: 27rpx;
}

.t-login .uni-input-placeholder {
  color: #aeaeae;
}

.cl {
  zoom: 1;
}

.cl:after {
  clear: both;
  display: block;
  visibility: hidden;
  height: 0;
  content: '\20';
}
</style>